<template>
	<div class="publicpageview">
		<div class="publicformview">
			<el-form :inline="true" :model="listQuery" size="mini" ref="searchForm">
				<el-row :gutter="25">
					<el-col :span="4">
						<el-form-item label="承租户：" prop="renter">
							<el-input clearable v-model="listQuery.renter"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="合同号：" prop="ContractID">
							<el-input clearable v-model="listQuery.ContractID"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="发放日期开始：" prop="StartSignDate">
							<el-date-picker clearable v-model="listQuery.StartSignDate" type="date" placeholder="年/月/日">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="发放日期截止：" prop="StopSignDate">
							<el-date-picker clearable v-model="listQuery.StopSignDate" type="date" placeholder="年/月/日">
							</el-date-picker>
						</el-form-item>
					</el-col>

					<el-col :span="4">
						<div>
							<el-button size="mini" type="primary" @click="cxSumit">查询</el-button>
							<el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div class="publitableview">
			<!-- <el-button type="primary" size="mini" @click="handleAddUser('建账')">执行建账</el-button> -->
			<el-table v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">
				<el-table-column align="center" label="区房屋管理单位" prop="dname">
				</el-table-column>

				<el-table-column align="center" label="管理部(分中心)" prop="aname">
				</el-table-column>

				<el-table-column align="center" label="管片" prop="blockGroupName">
				</el-table-column>

				<el-table-column align="center" label="所号" prop="blockNo">
				</el-table-column>

				<el-table-column align="center" label="合同编号" prop="contractId">
				</el-table-column>
				
				<el-table-column align="center" label="开始时间" prop="startTime">
				</el-table-column>
				
				<el-table-column align="center" label="多少月" prop="mouthCount">
				</el-table-column>
				
				<el-table-column align="center" label="性质" prop="livingway">
				</el-table-column>
				
				<el-table-column align="center" label="创建时间" prop="createTime">
				</el-table-column>

				<el-table-column align="center" label="合同状态" prop="statflag">
					<template slot-scope="scope">
						{{scope.row.statflag==0?'失效':'正常'}}
					</template>
				</el-table-column>


			<!-- 	<el-table-column align="center" label="操作" width="240">
					<template slot-scope="scope">
						<el-button v-if="scope.row.statflag==0" type="text" size="mini"
							@click="quxiao(scope.row.id)">取消建账</el-button>
						<el-button type="text" size="mini" @click="handleTijiao">冻结剩余账期</el-button>
					</template>
				</el-table-column> -->
			</el-table>

			<div class="publicpaginationview">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="listQuery.pageSize" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageNum"
					layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
			</div>
		</div>


		<el-dialog :title="dialogName" v-if='shenheVisible' :visible.sync="shenheVisible" width="50%"
			:before-close="handleClose" style="margin-top: 0px;">
			<el-form :model="addQuery" :rules='rules' ref="jianzhangForm" class="demo-ruleForm" label-position="right"
				label-width="160px">
				<el-row :gutter="20">
					<el-col :span="10">
						<el-form-item label="区房屋管理单位：" prop="areaUnit" label-width="140px">
							<el-select disabled v-model="addQuery.areaUnit" @change='areaChange' value-key="dname">
								<div v-for="(item,index) in areaList" :key="index">
									<el-option :label="item.dname" :value="item" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="管理部(分中心)：" prop="manageDepartment" label-width="140px">
							<el-select disabled v-model="addQuery.manageDepartment" @change='HouseChange' value-key="aname">
								<div v-for="(item,index) in HouseList" :key="index">

									<el-option :label="item.aname" :value="item" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="10">
						<el-form-item label="管片：" prop="blockgroup" label-width="140px">
							<el-select v-model="addQuery.BlockGroup" @change='guanpianChange' value-key="groupnew">
								<div v-for="(item,index) in guanpianList" :key="index">
									<el-option :label="item.groupnew" :value="item" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="所号：" prop="blockno" label-width="140px">
							<!-- <el-select v-model="addQuery.blockno" multiple @change='suohaoChange' value-key="blockno">
									<el-option v-for="(item,index) in suohaoList" :label="item.blockno" :value="item" :key="index">
									</el-option>
							</el-select> -->
							<el-select v-model="addQuery.blockno" @remove-tag='deleteChange' @visible-change='suohaoChange' multiple collapse-tags value-key="blockno">
									<el-option
									      v-for="item in suohaoList"
									      :key="item.blockno"
									      :label="item.blockno"
									      :value="item">
									    </el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="10">
						<el-form-item label-width="140px" label="合同编号：" prop="contract">
							<el-select v-model="addQuery.contract" @visible-change='hetongChange'  multiple collapse-tags value-key="contractid">
								<div v-for="(item,index) in hetongList" :key="index">
									<el-option :label="item.contractid" :value="item.contractid" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label-width="140px" label="开始时间：" prop="startTime">
							<el-date-picker v-model="addQuery.startTime" type="date" placeholder="年/月/日">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="10">
						<el-form-item label="月份：" prop="mouthCount" label-width="140px">
							<el-select v-model="addQuery.mouthCount">
								<el-option label="1个月" value="1" :key="1"></el-option>
								<el-option label="2个月" value="2" :key="2"></el-option>
								<el-option label="3个月" value="3" :key="3"></el-option>
								<el-option label="4个月" value="4" :key="4"></el-option>
								<el-option label="5个月" value="5" :key="5"></el-option>
								<el-option label="6个月" value="6" :key="6"></el-option>
								<el-option label="7个月" value="7" :key="7"></el-option>
								<el-option label="8个月" value="8" :key="8"></el-option>
								<el-option label="9个月" value="9" :key="9"></el-option>
								<el-option label="10个月" value="10" :key="10"></el-option>
								<el-option label="11个月" value="11" :key="11"></el-option>
								<el-option label="12个月" value="12" :key="12"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="用户科目：" prop="classNew" label-width="140px">
							<el-select v-model="addQuery.classNew">
								<el-option label="应收" value="应收" :key="1"></el-option>
								<el-option label="新订" value="新订" :key="2"></el-option>
								<el-option label="退订" value="退订" :key="3"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

			</el-form>
			<div class="saveContent">
				<el-button v-if="dialogName=='租金建账详情'" type="primary" @click="shenheVisible = false"
					size="medium">返回</el-button>
				<el-button v-else type="primary" @click="saveJZ" size="medium">保 存</el-button>
			</div>

		</el-dialog>


		<el-dialog title="取消建账" :visible.sync="quxiaoPopup" width="50%" :before-close="handleClose"
			style="margin-top: 0px;">
			<el-form :model="formData" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="160px">
				<el-form-item label="承租户编号：" prop="AName">
					<el-input v-model="listQuery.AName"></el-input>
				</el-form-item>
				<el-form-item label="承租户名称：" prop="AName">
					<el-input v-model="listQuery.AName"></el-input>
				</el-form-item>
				<el-form-item label="管片：" prop="AName">
					<el-input v-model="listQuery.AName"></el-input>
				</el-form-item>
				<el-form-item label="所号：" prop="AName">
					<el-input v-model="listQuery.AName"></el-input>
				</el-form-item>
				<el-form-item label="合同编号：" prop="AName">
					<el-input v-model="listQuery.AName"></el-input>
				</el-form-item>
				<el-form-item label="合同状态：" prop="AName">
					<el-input v-model="listQuery.AName"></el-input>
				</el-form-item>
				<el-form-item label="计租面积：" prop="AName">
					<el-input v-model="listQuery.AName"></el-input>
				</el-form-item>
				<el-form-item label="总租金：" prop="AName">
					<el-input v-model="listQuery.AName"></el-input>
				</el-form-item>
				<el-form-item label="备注：" prop="AName">
					<el-input type="textarea" v-model="listQuery.desc"></el-input>
				</el-form-item>
			</el-form>


			<div class="saveContent">
				<el-button v-if="dialogName=='租金建账详情'" type="primary" @click="quxiaoPopup = false" size="medium">返回</el-button>
				<el-button v-else type="primary" @click="quxiaoPopup = false" size="medium">保 存</el-button>
			</div>

		</el-dialog>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		establishingList,
		jianzhangExecute,
		queryOneRent,
		renterYearRentList,
		jianzhangDel,
		getRenterByBlock
	} from '@/api/management'
	import {
		getHouseAdmin,
		getArea,
		blockGroupList,
		getBlockByGroup,
		RenterListByblockno
	} from '@/api/industry'
	export default {
		name: "managementjinghuguanli",
		data() {
			return {
				listQuery: {
					pageNum: 1,
					pageSize: 10,
					StartSignDate: "",
					renter: "",
					StopSignDate: "",
					ContractID: ""
				},
				total: 0,
				list: [],
				listLoading: false,
				dialogVisible: false,
				addQuery: {
					blockno: [],
					AID: '',
					BlockGroup: '',
					contract: '',
					DID: '',
					manageDepartment: '',
					areaUnit: '',
					classNew: '',
					mouthCount: '',
					startTime:''
				},

				rules: {
					areaUnit: [{
						required: true,
						message: '请选择区',
						trigger: 'blur'
					}],
					mouthCount: [{
						required: true,
						message: '请选择月份',
						trigger: 'blur'
					}],
					classNew: [{
						required: true,
						message: '请选择用户科目',
						trigger: 'blur'
					}],
					startTime:[{
						required: true,
						message: '请选择开始日期',
						trigger: 'blur'
					}]
				},
				formData: {
					userId: "",
					userName: "",
					phone: "",
					deptId: "",
					roleId: "",
					userStatus: "1",
					remarks: "",
				},
				shenheQuery: {},
				shenheVisible: false,
				dialogName: '',
				quxiaoPopup: false,
				yearList: [],
				// 区房屋管理单位
				areaList: [],
				// 根据区获取部门
				HouseList: [],
				// 管片列表
				guanpianList: [],
				suohaoList: [],
				chanyeList: [],
				nianfenList: [],
				yonghukemuList: [],
				hetongList: []
			};
		},

		computed: {
		},

		mounted() {
			
			// 遍历字典
			this.chanyeList = JSON.parse(localStorage.getItem('jinying'))
			this.chanyeList.forEach((item, index) => {
				if (item.classname == '年份') {
					this.nianfenList = item.classmidList
				}
			})

			this.establishingList()
			this.getArea()
		},

		methods: {
			nianfenChange(e) {
				console.log(e)
				this.addQuery.mouthCount = e
				this.nianfenList.forEach((item, index) => {
					if (e == item.classmid) {
						this.yonghukemuList = item.classdetailList
					}
				})
			},
			shenheButton(type) {
				this.shenheName = type
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.establishingList();
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.establishingList();
			},
			establishingList() {
				let data = this.listQuery
				data.StartSignDate = data.StartSignDate ? dayjs(data.StartSignDate).format('YYYY-MM-DD HH:mm:ss') : ''
				data.StopSignDate = data.StopSignDate ? dayjs(data.StopSignDate).format('YYYY-MM-DD HH:mm:ss') : ''
				establishingList(this.listQuery).then((response) => {
					this.total = response.data.total;
					this.list = response.data.list;
				});

			},
			cxSumit() {
				if (this.listQuery.StartSignDate || this.listQuery.StopSignDate) {
					if (this.listQuery.StartSignDate && this.listQuery.StopSignDate) {
						this.establishingList()
					} else {
						this.$message({
							type: 'success',
							message: '请输入区间范围时间!'
						});
					}
				} else {
					this.establishingList()
				}
			},
			cxUser() {
				if (this.addQuery.renterId) {
					let datayear = {
						rentId: this.addQuery.renterId
					}
					renterYearRentList(datayear).then(res => {
						console.log(res)
						this.yearList = res.data
						this.yearList.forEach((item, index) => {
							item.years = 30
						})
					})

					let data = {
						renterId: this.addQuery.renterId
					}
					queryOneRent(data).then((res) => {
						console.log(res)
						if (res.data != null) {
							this.addQuery = res.data
							if (this.addQuery.statflag == 0) {
								this.addQuery.statflag = '正常'
							} else {
								this.addQuery.statflag = '失效'
							}
							this.addQuery.renterId = res.data.renterid
						}

					});
				} else {
					this.$message({
						type: 'success',
						message: '请填写承租户编号!'
					});
				}

			},
			resetForm(val) {
				console.log("1");
				this.$refs[val].resetFields();
			},
			// 执行建账
			saveJZ() {
				console.log(this.addQuery.contract.toString())
				this.$refs.jianzhangForm.validate((valid) => {
					if (valid) {
						if(dayjs(this.addQuery.startTime).format('YYYY') == dayjs().format('YYYY')){
							let datayear = {
								DID: this.addQuery.DID,
								AID: this.addQuery.AID,
								BlockGroup: this.addQuery.BlockGroup,
								blockno: this.addQuery.blockno.toString(),
								contract: this.addQuery.contract.toString(),
								classNew: this.addQuery.classNew,
								mouthCount: this.addQuery.mouthCount,
								startTime:dayjs(this.addQuery.startTime).format('YYYY-MM-DD HH:mm:ss')
							}
							jianzhangExecute(datayear).then(res => {
								console.log(res)
								this.$message({
									type: 'success',
									message: '提交成功!'
								});
								this.establishingList()
								this.shenheVisible = false
							
								this.addQuery = {}
							})
						}else{
							this.$message({
								type: 'success',
								message: '开始日期只能选择今年!'
							});
						}
						
					} else {
						console.log('验证失败！')
						return false
					}
				})
			},

			handleAddUser(name) {
				this.dialogName = '执行建账'
				this.shenheVisible = true
				
				if(localStorage.getItem('userHouseAdminId')>0){
					this.addQuery.DID = localStorage.getItem('userDID')
					this.addQuery.areaUnit = localStorage.getItem('userDname')
					
					this.addQuery.AID = localStorage.getItem('userHouseAdminId')
					this.addQuery.manageDepartment = localStorage.getItem('userHouseAdminName')
					this.blockGroupList(this.addQuery.AID)
					// this.isluru = true
					
				}
			},
			detailUser(e) {
				this.dialogName = '租金建账详情'
				this.shenheVisible = true
				let datayear = {
					rentId: e.rentId
				}
				renterYearRentList(datayear).then(res => {
					console.log(res)
					this.yearList = res.data
					this.yearList.forEach((item, index) => {
						item.years = 30
					})
				})

				let data = {
					renterId: e.rentId
				}
				queryOneRent(data).then((res) => {
					console.log(res)
					if (res.data != null) {
						this.addQuery = res.data
						if (this.addQuery.statflag == 0) {
							this.addQuery.statflag = '正常'
						} else {
							this.addQuery.statflag = '失效'
						}
					}

				});
			},
			quxiao(id) {
				let data = {
					id: id
				}
				jianzhangDel(data).then(res => {
					console.log(res)
					this.$message({
						type: 'success',
						message: '提交成功!'
					});
					this.establishingList()
				})
				// this.quxiaoPopup = true
			},
			handleUpdate(currentData) {
				//   一定要在打开弹窗前 再赋值 不然resetFiles没用
				this.dialogVisible = true;
				this.$nextTick(() => {
					this.formData = {
						...currentData
					};
				});
			},
			// 提交
			handleTijiao() {
				this.$confirm('此操作将冻结该条建账下的剩余账期，请确认是否继续操作？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '提交成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消提交'
					});
				});
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
						this.addQuery = {}
					})
					.catch(_ => {});
			},

			// 选择区房屋管理
			areaChange(e) {
				console.log(e)
				this.addQuery.DID = e.did
				this.addQuery.areaUnit = e.dname
				this.getHouseAdmin(e.did)
			},
			// 根据区获取部门
			HouseChange(e) {
				console.log(e)
				this.addQuery.AID = e.aid
				this.addQuery.manageDepartment = e.aname
				this.blockGroupList(e.aid)
			},
			getHouseAdmin(e) {
				getHouseAdmin({
					DID: e
				}).then((res) => {
					this.HouseList = res.data
				})
			},
			getArea() {
				getArea().then((res) => {
					console.log(res)
					this.areaList = res.data
				})
			}, // 管片列表
			blockGroupList(e) {
				let data = {
					group: '',
					groupNumber: '',
					houseAdmin: e,
					pageNum: '',
					pageSize: 99999
				}
				blockGroupList(data).then((res) => {
					this.guanpianList = res.data.list
					// this.houseAdminList()
				})
			},
			guanpianChange(e) {
				this.addQuery.BlockGroup = e.groupnew
				this.getBlockByGroup(e.groupnew)
			},
			getBlockByGroup(e) {
				let data = {
					group: e,
				}
				getBlockByGroup(data).then(res => {
					console.log(res)
					this.suohaoList = res.data
				})
			},
			suohaoChange(e) {
				if(!e){
					if(this.addQuery.blockno.length>0){
						let allBlockno = []
						this.addQuery.blockno.forEach((item,index)=>{
							allBlockno.push(item.blockno)
						})
						this.addQuery.blockno = allBlockno
						this.getRenterByBlock(allBlockno)
					}
					
				}
				
			},
			deleteChange(e){
				console.log(e,this.addQuery.blockno)
				if(this.addQuery.blockno.length>0){
					this.getRenterByBlock(this.addQuery.blockno)
				}
				
			},
			getRenterByBlock(e) {
				let data = {
					blockno: e
				}
				getRenterByBlock(data).then(res => {
					console.log(res)
					this.hetongList = res.data
				})
			},
			hetongChange(e) {
				
			}
		},
	};
</script>
<style scoped>
	.tianjiaButton {
		border: 2px solid #008C93;
		background-color: #fff;
		color: #008C93;
	}

	.xinxi {
		display: flex;
		width: 800px;
	}

	.goufangContent {
		width: 100%;
		box-sizing: border-box;
		padding: 20px;
		background-color: #F7F7F7;
	}

	.tabButton {
		background: #EFF2F7;
		color: #333333;
		border: none;
	}

	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	/deep/.el-input__inner {
		height: 30px !important;
		line-height: 30px !important;
	}

	/deep/.el-form-item__label {
		height: 30px !important;
	}

	/dee/.el-date-editor {
		width: 120px !important;
	}

	/deep/.pickers {
		width: 160px;
	}
</style>